<template>
	<view class="flexbox">
		<view class="need-card-image">
			<lazyLoad threshold="-200" border-radius="16" :image="needcardall.demandCover">
			</lazyLoad>
			<!-- <u-lazy-load height="200" img-mode :image="needcardall.demandImgUrl" class="imageriadius" border-radius="16">
			</u-lazy-load> -->
			<!-- 			<image :src="needcardall.image" style="width: 100%;height: 100%;border-radius: 16rpx;">
			</image> -->
		</view>

		<view class="need-card-text">
			<!-- 需求名字  人物头像 -->
			<view class="need-card-title">
				<view>需求: </view>
				<view style="font-size: 30rpx;width: 45%;line-height: 180%;" v-html="needcardall.demandVariety"></view>
				<view style="width: 15%;height:90%;">
					<lazyLoad threshold="-200" border-radius="10"
						style="width: 100%;height: 100%; border-radius: 130rpx;" :image="needcardall.demandCover">
					</lazyLoad>
					<!-- <u-lazy-load style="width: 100%;height: 100%; border-radius: 130rpx;" :image="needcardall.avatar">
					</u-lazy-load> -->
				</view>
			</view>
			<!-- 品种 -->
			<view class="need-card-details" v-html="`品种：${needcardall.demandSpecies}`"></view>
			<!-- 重量 -->
			<view class="need-card-details">重量：{{needcardall.demandKilogram}} kg</view>
			<!-- 收货地址 -->
			<view class="need-card-details">收货地址：{{needcardall.detailedAddress}}</view>
			<!-- 交货日期 -->
			<view class="need-card-details">交货截至日期：{{needcardall.expirationDate}}</view>
		</view>
	</view>
</template>

<script>
	import lazyLoad from "../../../components/common/lazyLoad.vue"
	export default {
		data() {
			return {

			}
		},
		mounted() {
			// console.log(this.needcardall)
		},
		props: ['needcardall'],
		methods: {

		}
	}
</script>

<style>
	.flexbox {
		display: flex;
		flex-direction: row;
	}

	.need-card-image {
		float: left;
		width: 44%;
		height: 200rpx;
		/* 	background-color: #007AFF; */
		border-radius: 16rpx;
		margin-right: 16rpx;
	}

	.need-card-text {
		width: 52%;
		height: 100%;
		/* 	background: red; */
		float: left;
	}

	.need-card-title {

		width: 100%;
		margin-top: 8rpx;
		margin-bottom: -8RPX;
		height: 33%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		/* 	background: #007AFF; */
		padding-top: 8rpx;
		color: #ff5733;
		font-size: 36rpx;
	}

	.need-card-title>view {
		float: left;
		font-weight: bold;
		margin-right: 16rpx;
	}

	.need-card-details {
		width: 100%;
		height: 15%;
		/* 	background: #2C405A; */
		/* 设置文本超出裁剪 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 20rpx;
		color: rgba(128, 128, 128, 1);
	}

	.imageriadius {
		height: 200rpx;
	}
</style>
